<template>
	<div class="">
		<div class="title">
			<div class="name">答题卡</div>
			<template v-if="message.showAnswer">
				<div class="tags" v-if="type === 'answer'">
					<div class="checkbox success"></div>
					做对
					<div class="checkbox danger"></div>
					做错
					<!-- <div class="checkbox warning"></div>
					部分答对 -->
				</div>
				<div class="tags" v-else>
					<div class="checkbox success"></div>
					已答
					<div class="checkbox"></div>
					未答
				</div>
			</template>
		</div>
		<div class="list" v-if="update">
			<div
				class="item"
				:class="[itemClass(item, index)]"
				v-for="(item, index) in questionList"
				:key="item + index"
				@click="onJumpQuestion(index)"
			>
				{{ index + 1 }}
				<div class="static">未做</div>
			</div>
		</div>
	</div>
</template>

<script>
import mixins from "@/mixins"
export default {
	name: "answer-card",
	mixins: [mixins],
	props: {
		type: {
			type: String,
			default: "question", // question 答题中  answer 答题后
		},
	},
	data() {
		return {
			update: true,
		}
	},
	computed: {
		message() {
			return this.$store.state.exam.message
		},
		questionList() {
			return this.$store.getters["exam/questionList"]
		},
		answer() {
			return this.$store.getters["exam/answer"]
		},
		current: {
			get() {
				return this.$store.state.exam.current
			},
			set(value) {
				this.$store.commit("exam/setCurrent", value)
			},
		},
		arrowText() {
			return this.visible ? "收起" : "展开"
		},
	},
	methods: {
		onJumpQuestion(index) {
			this.$emit("on-click", index)
			this.current = index
		},

		itemClass(item, index) {
			if (this.type === "question") {
				if (this.answer[index] && this.answer[index].length) {
					return "success"
				} else {
					return ""
				}
			} else {
				if (!this.message.showAnswer) {
					return ""
				}
				const choiceAnswer = (item.choiceAnswer || "").split(",")
				const answer = (item.answer || "").split(",")

				if (choiceAnswer.length === answer.length && choiceAnswer.every(item => answer.includes(item))) {
					return "success"
				}
				// if (choiceAnswer.length && choiceAnswer.some(item => answer.includes(item))) {
				// 	return "warning"
				// }
				return "danger"
			}
		},

		updateList() {
			this.update = false
			this.$nextTick(() => {
				this.update = true
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.success {
	border: 1px solid $color !important;
	background: rgba($color, 0.15);
	color: $color;
}
.danger {
	border: 1px solid $danger !important;
	background: rgba($danger, 0.15);
	color: $danger;
}
.warning {
	position: relative;
	overflow: hidden;
	border: 1px solid $color !important;
	color: $color;
	&::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba($color, 0.15);
		transform: rotate(45deg) scale(2) translate(50%, 0);
	}
}

.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 110rpx;
	border-bottom: 1px solid #f2f2f2;
	margin-bottom: 30rpx;
	white-space: nowrap;
	.name {
		font-size: 30rpx;
	}
	.tags {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 26rpx;
		color: #454545;
		.checkbox {
			margin-right: 5rpx;
			margin-left: 18rpx;
			&.success {
				margin-left: 0;
			}
		}
	}
	.slide {
		color: #999999;
		font-size: 24rpx;
		position: relative;
		padding-right: 40rpx;
	}
}
.list {
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 50rpx;
	flex-wrap: wrap;
}
.item {
	position: relative;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	border: 1px solid #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: none;

	.static {
		position: absolute;
		top: -13rpx;
		right: -30rpx;
		transform: scale(0.75);
		white-space: nowrap;
		font-size: 24rpx;
		color: #fff;
		background: $danger;
		border-radius: 100px 100px 100px 0;
		padding: 5rpx 10rpx;
		opacity: 0;
		&.active {
			opacity: 1;
		}
	}
}
</style>
